﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Endless Admin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
      <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
	
	<!-- Font Awesome -->
	<link href="css/font-awesome.min.css" rel="stylesheet">

	<!-- Pace -->
	<link href="css/pace.css" rel="stylesheet">
	
	<!-- Endless -->
	<link href="css/endless.min.css" rel="stylesheet">
	<link href="css/endless-skin.css" rel="stylesheet">
	
  </head>

  <body class="overflow-hidden">
	<!-- Overlay Div -->
	<div id="overlay" class="transparent"></div>
	
	<a href="" id="theme-setting-icon"><i class="fa fa-cog fa-lg"></i></a>
	<div id="theme-setting">
		<div class="title">
			<strong class="no-margin">Skin Color</strong>
		</div>
		<div class="theme-box">
			<a class="theme-color" style="background:#323447" id="default"></a>
			<a class="theme-color" style="background:#efefef" id="skin-1"></a>
			<a class="theme-color" style="background:#a93922" id="skin-2"></a>
			<a class="theme-color" style="background:#3e6b96" id="skin-3"></a>
			<a class="theme-color" style="background:#635247" id="skin-4"></a>
			<a class="theme-color" style="background:#3a3a3a" id="skin-5"></a>
			<a class="theme-color" style="background:#495B6C" id="skin-6"></a>
		</div>
		<div class="title">
			<strong class="no-margin">Sidebar Menu</strong>
		</div>
		<div class="theme-box">
			<label class="label-checkbox">
				<input type="checkbox" checked id="fixedSidebar">
				<span class="custom-checkbox"></span>
				Fixed Sidebar
			</label>
		</div>
	</div><!-- /theme-setting -->

	<div id="wrapper" class="preload">
		<div id="top-nav" class="skin-6 fixed">
			<div class="brand">
				<span>Endless</span>
				<span class="text-toggle"> Admin</span>
			</div><!-- /brand -->
			<button type="button" class="navbar-toggle pull-left" id="sidebarToggle">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<button type="button" class="navbar-toggle pull-left hide-menu" id="menuToggle">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<ul class="nav-notification clearfix">
				<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">
						<i class="fa fa-envelope fa-lg"></i>
						<span class="notification-label bounceIn animation-delay4">7</span>
					</a>
					<ul class="dropdown-menu message dropdown-1">
						<li><a>You have 4 new unread messages</a></li>					  
						<li>
							<a class="clearfix" href="#">
								<img src="img/user.jpg" alt="User Avatar">
								<div class="detail">
									<strong>John Doe</strong>
									<p class="no-margin">
										Lorem ipsum dolor sit amet...
									</p>
									<small class="text-muted"><i class="fa fa-check text-success"></i> 27m ago</small>
								</div>
							</a>	
						</li>
						<li>
							<a class="clearfix" href="#">
								<img src="img/user2.jpg" alt="User Avatar">
								<div class="detail">
									<strong>Jane Doe</strong>
									<p class="no-margin">
										Lorem ipsum dolor sit amet...
									</p>
									<small class="text-muted"><i class="fa fa-check text-success"></i> 5hr ago</small>
								</div>
							</a>	
						</li>
						<li>
							<a class="clearfix" href="#">
								<img src="img/user.jpg" alt="User Avatar">
								<div class="detail">
									<strong>Bill Doe</strong>
									<p class="no-margin">
										Lorem ipsum dolor sit amet...
									</p>
									<small class="text-muted"><i class="fa fa-reply"></i> Yesterday</small>
								</div>
							</a>	
						</li>
						<li>
							<a class="clearfix" href="#">
								<img src="img/user2.jpg" alt="User Avatar">
								<div class="detail">
									<strong>Baby Doe</strong>
									<p class="no-margin">
										Lorem ipsum dolor sit amet...
									</p>
									<small class="text-muted"><i class="fa fa-reply"></i> 9 Feb 2013</small>
								</div>
							</a>	
						</li>
						<li><a href="#">View all messages</a></li>					  
					</ul>
				</li>
				<li class="dropdown hidden-xs">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="fa fa-tasks fa-lg"></i>
						<span class="notification-label bounceIn animation-delay5">4</span>
					</a>
					<ul class="dropdown-menu task dropdown-2">
						<li><a href="#">You have 4 tasks to complete</a></li>					  
						<li>
							<a href="#">
								<div class="clearfix">
									<span class="pull-left">Bug Fixes</span>
									<small class="pull-right text-muted">78%</small>
								</div>
								<div class="progress">
									<div class="progress-bar" style="width:78%"></div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="clearfix">
									<span class="pull-left">Software Updating</span>
									<small class="pull-right text-muted">54%</small>
								</div>
								<div class="progress progress-striped">
									<div class="progress-bar progress-bar-success" style="width:54%"></div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="clearfix">
									<span class="pull-left">Database Migration</span>
									<small class="pull-right text-muted">23%</small>
								</div>
								<div class="progress">
									<div class="progress-bar progress-bar-warning" style="width:23%"></div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="clearfix">
									<span class="pull-left">Unit Testing</span>
									<small class="pull-right text-muted">92%</small>
								</div>
								<div class="progress progress-striped active">
									<div class="progress-bar progress-bar-danger " style="width:92%"></div>
								</div>
							</a>
						</li>
						<li><a href="#">View all tasks</a></li>					  
					</ul>
				</li>
				<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">
						<i class="fa fa-bell fa-lg"></i>
						<span class="notification-label bounceIn animation-delay6">5</span>
					</a>
					<ul class="dropdown-menu notification dropdown-3">
						<li><a href="#">You have 5 new notifications</a></li>					  
						<li>
							<a href="#">
								<span class="notification-icon bg-warning">
									<i class="fa fa-warning"></i>
								</span>
								<span class="m-left-xs">Server #2 not responding.</span>
								<span class="time text-muted">Just now</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="notification-icon bg-success">
									<i class="fa fa-plus"></i>
								</span>
								<span class="m-left-xs">New user registration.</span>
								<span class="time text-muted">2m ago</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="notification-icon bg-danger">
									<i class="fa fa-bolt"></i>
								</span>
								<span class="m-left-xs">Application error.</span>
								<span class="time text-muted">5m ago</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="notification-icon bg-success">
									<i class="fa fa-usd"></i>
								</span>
								<span class="m-left-xs">2 items sold.</span>
								<span class="time text-muted">1hr ago</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="notification-icon bg-success">
									<i class="fa fa-plus"></i>
								</span>
								<span class="m-left-xs">New user registration.</span>
								<span class="time text-muted">1hr ago</span>
							</a>
						</li>
						<li><a href="#">View all notifications</a></li>					  
					</ul>
				</li>
				<li class="profile dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">
						<strong>John Doe</strong>
						<span><i class="fa fa-chevron-down"></i></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a class="clearfix" href="#">
								<img src="img/user.jpg" alt="User Avatar">
								<div class="detail">
									<strong>John Doe</strong>
									<p class="grey">John_Doe@email.com</p> 
								</div>
							</a>
						</li>
						<li><a tabindex="-1" href="profile.html" class="main-link"><i class="fa fa-edit fa-lg"></i> Edit profile</a></li>
						<li><a tabindex="-1" href="gallery.html" class="main-link"><i class="fa fa-picture-o fa-lg"></i> Photo Gallery</a></li>
						<li><a tabindex="-1" href="#" class="theme-setting"><i class="fa fa-cog fa-lg"></i> Setting</a></li>
						<li class="divider"></li>
						<li><a tabindex="-1" class="main-link logoutConfirm_open" href="#logoutConfirm"><i class="fa fa-lock fa-lg"></i> Log out</a></li>
					</ul>
				</li>
			</ul>
		</div><!-- /top-nav-->
		
		<aside class="fixed skin-6">
			<div class="sidebar-inner scrollable-sidebar">
				<div class="size-toggle">
					<a class="btn btn-sm" id="sizeToggle">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
					<a class="btn btn-sm pull-right logoutConfirm_open"  href="#logoutConfirm">
						<i class="fa fa-power-off"></i>
					</a>
				</div><!-- /size-toggle -->	
				<div class="user-block clearfix">
					<img src="img/user.jpg" alt="User Avatar">
					<div class="detail">
						<strong>John Doe</strong><span class="badge badge-danger bounceIn animation-delay4 m-left-xs">4</span>
						<ul class="list-inline">
							<li><a href="profile.html">Profile</a></li>
							<li><a href="inbox.html" class="no-margin">Inbox</a></li>
						</ul>
					</div>
				</div><!-- /user-block -->
				<div class="search-block">
					<div class="input-group">
						<input type="text" class="form-control input-sm" placeholder="search here...">
						<span class="input-group-btn">
							<button class="btn btn-default btn-sm" type="button"><i class="fa fa-search"></i></button>
						</span>
					</div><!-- /input-group -->
				</div><!-- /search-block -->
				<div class="main-menu">
					<ul>
						<li>
							<a href="index.html">
								<span class="menu-icon">
									<i class="fa fa-desktop fa-lg"></i> 
								</span>
								<span class="text">
									Dashboard
								</span>
								<span class="menu-hover"></span>
							</a>
						</li>
						<li class="active openable open">
							<a href="#">
								<span class="menu-icon">
									<i class="fa fa-file-text fa-lg"></i> 
								</span>
								<span class="text">
									Page
								</span>
								<span class="menu-hover"></span>
							</a>
							<ul class="submenu">
								<li><a href="login.html"><span class="submenu-label">Sign in</span></a></li>
								<li><a href="register.html"><span class="submenu-label">Sign up</span></a></li>
								<li><a href="lock_screen.html"><span class="submenu-label">Lock Screen</span></a></li>
								<li class="active"><a href="profile.html"><span class="submenu-label">Profile</span></a></li>
								<li><a href="blog.html"><span class="submenu-label">Blog</span></a></li>
								<li><a href="single_post.html"><span class="submenu-label">Single Post</span></a></li>
								<li><a href="landing.html"><span class="submenu-label">Landing</span></a></li>
								<li><a href="search_result.html"><span class="submenu-label">Search Result</span></a></li>
								<li><a href="chat.html"><span class="submenu-label">Chat Room</span></a></li>
								<li><a href="movie.html"><span class="submenu-label">Movie Gallery</span></a></li>
								<li><a href="pricing.html"><span class="submenu-label">Pricing</span></a></li>
								<li><a href="invoice.html"><span class="submenu-label">Invoice</span></a></li>
								<li><a href="faq.html"><span class="submenu-label">FAQ</span></a></li>
								<li><a href="contact.html"><span class="submenu-label">Contact</span></a></li>
								<li><a href="error404.html"><span class="submenu-label">Error404</span></a></li>
								<li><a href="error500.html"><span class="submenu-label">Error500</span></a></li>
								<li><a href="blank.html"><span class="submenu-label">Blank</span></a></li>
							</ul>
						</li>
						<li class="openable">
							<a href="#">
								<span class="menu-icon">
									<i class="fa fa-tag fa-lg"></i> 
								</span>
								<span class="text">
									Component
								</span>
								<span class="badge badge-success bounceIn animation-delay5">9</span>
								<span class="menu-hover"></span>
							</a>
							<ul class="submenu">
								<li><a href="ui_element.html"><span class="submenu-label">UI Features</span></a></li>
								<li><a href="button.html"><span class="submenu-label">Button & Icons</span></a></li>
								<li><a href="tab.html"><span class="submenu-label">Tab</span></a></li>
								<li><a href="nestable_list.html"><span class="submenu-label">Nestable List</span></a></li>
								<li><a href="calendar.html"><span class="submenu-label">Calendar</span></a></li>
								<li><a href="table.html"><span class="submenu-label">Table</span></a></li>
								<li><a href="widget.html"><span class="submenu-label">Widget</span></a></li>
								<li><a href="form_element.html"><span class="submenu-label">Form Element</span></a></li>
								<li><a href="form_wizard.html"><span class="submenu-label">Form Wizard</span></a></li>
							</ul>
						</li>
						<li>
							<a href="timeline.html">
								<span class="menu-icon">
									<i class="fa fa-clock-o fa-lg"></i> 
								</span>
								<span class="text">
									Timeline
								</span>
								<span class="menu-hover"></span>
							</a>
						</li>
						<li>
							<a href="gallery.html">
								<span class="menu-icon">
									<i class="fa fa-picture-o fa-lg"></i> 
								</span>
								<span class="text">
									Gallery
								</span>
								<span class="menu-hover"></span>
							</a>
						</li>
						<li>
							<a href="inbox.html">
								<span class="menu-icon">
									<i class="fa fa-envelope fa-lg"></i> 
								</span>
								<span class="text">
									Inbox
								</span>
								<span class="badge badge-danger bounceIn animation-delay6">4</span>
								<span class="menu-hover"></span>
							</a>
						</li>
						<li>
							<a href="email_selection.html">
								<span class="menu-icon">
									<i class="fa fa-tasks fa-lg"></i> 
								</span>
								<span class="text">
									Email Template
								</span>
								<small class="badge badge-warning bounceIn animation-delay7">New</small>
								<span class="menu-hover"></span>
							</a>
						</li>
						<li class="openable">
							<a href="#">
								<span class="menu-icon">
									<i class="fa fa-magic fa-lg"></i> 
								</span>
								<span class="text">
									Multi-Level menu
								</span>
								<span class="menu-hover"></span>
							</a>
							<ul class="submenu">
								<li class="openable">
									<a href="#">
										<span class="submenu-label">menu 2.1</span>
										<span class="badge badge-danger bounceIn animation-delay1 pull-right">3</span>
									</a>
									<ul class="submenu third-level">
										<li><a href="#"><span class="submenu-label">menu 3.1</span></a></li>
										<li><a href="#"><span class="submenu-label">menu 3.2</span></a></li>
										<li class="openable">
											<a href="#">
												<span class="submenu-label">menu 3.3</span>
												<span class="badge badge-danger bounceIn animation-delay1 pull-right">2</span>
											</a>
											<ul class="submenu fourth-level">
												<li><a href="#"><span class="submenu-label">menu 4.1</span></a></li>
												<li><a href="#"><span class="submenu-label">menu 4.2</span></a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="openable">
									<a href="#">
										<span class="submenu-label">menu 2.2</span>
										<span class="badge badge-success bounceIn animation-delay2 pull-right">3</span>
									</a>
									<ul class="submenu third-level">
										<li class="openable">
											<a href="#">
												<span class="submenu-label">menu 3.1</span>
												<span class="badge badge-success bounceIn animation-delay1 pull-right">2</span>
											</a>
											<ul class="submenu fourth-level">
												<li><a href="#"><span class="submenu-label">menu 4.1</span></a></li>
												<li><a href="#"><span class="submenu-label">menu 4.2</span></a></li>
											</ul>
										</li>
										<li><a href="#"><span class="submenu-label">menu 3.2</span></a></li>
										<li><a href="#"><span class="submenu-label">menu 3.3</span></a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
					
					<div class="alert alert-info">
						Welcome to Endless Admin. Do not forget to check all my pages. 
					</div>
				</div><!-- /main-menu -->
			</div><!-- /sidebar-inner scrollable-sidebar -->
		</aside>

		<div id="main-container">
			<div id="breadcrumb">
				<ul class="breadcrumb">
					 <li><i class="fa fa-home"></i><a href="index.html"> Home</a></li>
					 <li>Page</li>	 
					 <li class="active">Profile</li>	 
				</ul>
			</div><!--breadcrumb-->
			<ul class="tab-bar grey-tab">
				<li class="active">
					<a href="#overview" data-toggle="tab">
						<span class="block text-center">
							<i class="fa fa-home fa-2x"></i> 
						</span>
						Overview
					</a>
				</li>
				<li>
					<a href="#edit" data-toggle="tab">
						<span class="block text-center">
							<i class="fa fa-edit fa-2x"></i> 
						</span>
						Edit Profile
					</a>
				</li>
				<li>
					<a href="#message" data-toggle="tab">
						<span class="block text-center">
							<i class="fa fa-envelope fa-2x"></i> 
						</span>	
						Messages
					</a>
				</li>
			</ul>
			
			<div class="padding-md">
				<div class="row">
					<div class="col-md-3 col-sm-3">
						<div class="row">
							<div class="col-xs-6 col-sm-12 col-md-6 text-center">
								<a href="#">
									<img src="img/user.jpg" alt="User Avatar" class="img-thumbnail">
								</a>
								<div class="seperator"></div>
								<div class="seperator"></div>
							</div><!-- /.col -->
							<div class="col-xs-6 col-sm-12 col-md-6">
								<strong class="font-14">John Doe</strong>
								<small class="block text-muted">
									John_Doe@email.com
								</small> 
								<div class="seperator"></div>
								<a class="btn btn-success btn-xs m-bottom-sm">Follow</a>
								<div class="seperator"></div>
								<a href="#" class="social-connect tooltip-test facebook-hover pull-left m-right-xs" data-toggle="tooltip" data-original-title="Facebook"><i class="fa fa-facebook"></i></a>
								<a href="#" class="social-connect tooltip-test twitter-hover pull-left m-right-xs" data-toggle="tooltip" data-original-title="Twitter"><i class="fa fa-twitter"></i></a>
								<a href="#" class="social-connect tooltip-test google-plus-hover pull-left" data-toggle="tooltip" data-original-title="Google Plus"><i class="fa fa-google-plus"></i></a>
								<div class="seperator"></div>
								<div class="seperator"></div>
							</div><!-- /.col -->
						</div><!-- /.row -->
						<div class="panel m-top-md">
							<div class="panel-body">
								<div class="row">
									<div class="col-xs-4 text-center">
										<span class="block font-14">301</span>
										<small class="text-muted">Follower</small>
									</div><!-- /.col -->
									<div class="col-xs-4 text-center">
										<span class="block font-14">129</span>
										<small class="text-muted">Items</small>
									</div><!-- /.col -->
									<div class="col-xs-4 text-center">
										<span class="block font-14">2731</span>
										<small class="text-muted">Sales</small>
									</div><!-- /.col -->
								</div><!-- /.row -->
							</div>
						</div><!-- /panel -->
						
						<h5 class="headline">
							My Skill
							<span class="line"></span>
						</h5>
						<dl>
							<dt>HTML5 <span class="pull-right">90%</span></dt>
							<dd>
								<div class="progress progress-striped">
									<div class="progress-bar progress-bar-success animated-bar" style="width:90%"></div>
								</div>
							</dd>
							<dt>CSS <span class="pull-right">75%</span></dt>
							<dd>
								<div class="progress progress-striped">
									<div class="progress-bar progress-bar-info animated-bar" style="width:75%"></div>
								</div>
							</dd>
							<dt>jQuery <span class="pull-right">65%</span></dt>
							<dd>
								<div class="progress progress-striped">
									<div class="progress-bar progress-bar-warning animated-bar" style="width:65%"></div>
								</div>
							</dd>
							<dt>PHP <span class="pull-right">50%</span></dt>
							<dd>
								<div class="progress progress-striped">
									<div class="progress-bar progress-bar-danger animated-bar" style="width:50%"></div>
								</div>
							</dd>
						</dl>
					</div><!-- /.col -->
					<div class="col-md-9 col-sm-9">
						<div class="tab-content">
							<div class="tab-pane fade in active" id="overview">
								<div class="row">
									<div class="col-md-6">
										<div class="panel panel-default fadeInDown animation-delay2">
											<div class="panel-heading">
												About Me
											</div>
											<div class="panel-body">
												<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eros nibh, viverra a dui a, gravida varius velit. Nunc vel tempor nisi. Aenean id pellentesque mi, non placerat mi. Integer luctus accumsan tellus. Vivamus quis elit sit amet nibh lacinia suscipit eu quis purus. Vivamus tristique est non ipsum dapibus lacinia sed nec metus.</p>
											</div>
										</div><!-- /panel -->
											
										<div class="panel panel-default fadeInDown animation-delay3">
											<div class="panel-heading">
												<i class="fa fa-twitter"></i> Latest Tweets
											</div>
											<ul class="list-group"> 
												<li class="list-group-item"> 
													<p>Welcome <a href="#" class="text-info">@John Doe</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
													<small class="block text-muted">
														<i class="fa fa-clock-o"></i> 6 minutes ago
													</small>
												</li> 
												<li class="list-group-item"> 
													<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#" class="text-info">@Jand Doe</a></p> 
													<small class="block text-muted">
														<i class="fa fa-clock-o"></i> 41 minutes ago
													</small> 
												</li> 
												<li class="list-group-item"> <p><a href="#" class="text-info">@Bill Doe</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eros nibh, viverra a dui a, gravida varius velit.</p> 
													<small class="block text-muted">
														<i class="fa fa-clock-o"></i> 1 hour ago
													</small> 
												</li> 
												<li class="list-group-item"> <p><a href="#" class="text-info">@John Doe</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
													<small class="block text-muted">
														<i class="fa fa-clock-o"></i> 2 hours ago
													</small> 
												</li> 
											</ul><!-- /list-group -->
										</div><!-- /panel -->
									</div><!-- /.col -->
									<div class="col-md-6">
										<div class="panel panel-default fadeInUp animation-delay4">
											<div class="panel-heading">
												Last Orders <span class="badge badge-primary">8</span>
											</div>
											<div class="list-group">
												<a href="#" class="list-group-item">
													<div class="list-group-item-text clearfix">
														<span class="img-demo">
															IMAGE
														</span>
														<div class="pull-left m-left-sm m-top-sm">
															<strong>PRODUCT1</strong>
															<span class="badge badge-success">5 items</span>
															<span class="text-muted block">$360</span>
														</div>
													</div>
												</a>
												<a href="#" class="list-group-item">
													<div class="list-group-item-text clearfix">
														<span class="img-demo">
															IMAGE
														</span>
														<div class="pull-left m-left-sm m-top-sm">
															<strong>PRODUCT2</strong>
															<span class="badge badge-info">2 items</span>
															<span class="text-muted block">$1000</span>
														</div>
													</div>
												</a>
												<a href="#" class="list-group-item">
													<div class="list-group-item-text clearfix">
														<span class="img-demo">
															IMAGE
														</span>
														<div class="pull-left m-left-sm m-top-sm">
															<strong>PRODUCT3</strong>
															<span class="badge">1 item</span>
															<span class="text-muted block">$500</span>
														</div>
													</div>
												</a>
											</div><!-- /list-group -->	
										</div><!-- /panel -->
										<div class="panel panel-overview fadeInUp animation-delay5">
											<div class="overview-icon bg-success">
												<i class="fa fa-shopping-cart"></i>
											</div>
											<div class="overview-value">
												<div class="h2">256</div>
												<div class="text-muted">Sales</div>
											</div>
										</div><!--/ panel -->
										<div class="panel panel-overview fadeInUp animation-delay6">
											<div class="overview-icon bg-danger">
												<i class="fa fa-usd"></i>
											</div>
											<div class="overview-value">
												<div class="h2">$5,690</div>
												<div class="text-muted">Incomes</div>
											</div>
										</div><!--/ panel -->
									</div><!-- /.col -->
								</div><!-- /.row -->
								<div class="panel panel-default table-responsive">
									<div class="panel-heading">
										Products
										<span class="label label-danger pull-right">3 Items</span>
									</div>
									<table class="table table-bordered table-condensed table-hover table-striped table-vertical-center">
										<thead>
											<tr>
												<th></th>
												<th class="text-center">Name</th>
												<th class="text-center">Price</th>
												<th class="text-center">Total Sales</th>
												<th></th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td class="text-center hidden-xs">
													<img data-src="holder.js/60x60" alt="Product Image" src=".">
												</td>
												<td class="text-center">
													Leather Bag
												</td>
												<td class="text-center">
													$50
												</td>
												<td class="text-center">
													102
												</td>
												<td class="text-center">
													<a class="btn btn-sm btn-success">View</a>
												</td>
											</tr>
											<tr>
												<td class="text-center hidden-xs">
													<img data-src="holder.js/60x60" alt="Product Image" src=".">
												</td>
												<td class="text-center">
													Brown Sunglasses
												</td>
												<td class="text-center">
													$80
												</td>
												<td class="text-center">
													310
												</td>
												<td class="text-center">
													<a class="btn btn-sm btn-success">View</a>
												</td>
											</tr>
											<tr>
												<td class="text-center hidden-xs">
													<img data-src="holder.js/60x60" alt="Product Image" src=".">
												</td>
												<td class="text-center">
													Summer Dress
												</td>
												<td class="text-center">
													$35
												</td>
												<td class="text-center">
													89
												</td>
												<td class="text-center">
													<a class="btn btn-sm btn-success">View</a>
												</td>
											</tr>
										</tbody>
									</table>
								</div><!-- /panel -->
							</div><!-- /tab1 -->
							<div class="tab-pane fade" id="edit">
								
								<div class="row">
									<div class="panel panel-info pull-right">
										<div class="panel-body">
											Last Update on 12 Oct,2013
										</div>
									</div><!-- /panel -->
								</div><!-- /.row -->
								
								<div class="panel panel-default">
									<form class="form-horizontal form-border">
										<div class="panel-heading">
											Basic Information
										</div>
										<div class="panel-body">
											<div class="form-group">
												<label class="control-label col-md-2">Username</label>												
												<div class="col-md-10">
													<input type="text" class="form-control input-sm" placeholder="Username" value="John Doe">
												</div><!-- /.col -->
											</div><!-- /form-group -->
											<div class="form-group">
												<label class="control-label col-md-2">Password</label>
												<div class="col-md-10">
													<input type="password" class="form-control input-sm" value="Password">
												</div><!-- /.col -->
											</div><!-- /form-group -->
											<div class="form-group">
												<label class="control-label col-md-2">Email</label>
												<div class="col-md-10">
													<input type="text" class="form-control input-sm" value="john_doe@email.com">
												</div><!-- /.col -->
											</div><!-- /form-group -->
											<div class="form-group">
												<label class="control-label col-md-2">Gender</label>
												<div class="col-md-10">
													<label class="label-radio inline">
														<input type="radio" name="inline-radio" checked>
														<span class="custom-radio"></span>
														Male
													</label>
													<label class="label-radio inline">
														<input type="radio" name="inline-radio">
														<span class="custom-radio"></span>
														Female
													</label>
												</div><!-- /.col -->
											</div><!-- /form-group -->
											<div class="form-group">
												<label class="control-label col-md-2">Address</label>
												<div class="col-md-10">
													<textarea class="form-control" rows="3"></textarea>
												</div><!-- /.col -->
											</div><!-- /form-group -->
											<div class="form-group">
												<label class="control-label col-md-2">Phone</label>
												<div class="col-md-10">
													<input type="text" class="form-control input-sm">
												</div><!-- /.col -->
											</div><!-- /form-group -->
										</div>
										<div class="panel-footer">
											<div class="text-right">
												<button class="btn btn-sm btn-success">Update</button>
												<button class="btn btn-sm btn-success" type="reset">Reset</button>
											</div>
										</div>
									</form>
								</div><!-- /panel -->
							
								<div class="panel panel-default">
									<div class="panel-body padding-xs">
										<textarea class="form-control no-border no-shadow" rows="2" placeholder="What's on your mind?"></textarea>
									</div>
									<div class="panel-footer clearfix">
										<a class="btn btn-xs btn-success pull-right">Post</a>
									</div>
								</div><!-- /panel -->
								<div class="panel panel-default">
									<div class="panel-heading">
										About Me
									</div>
									<div class="panel-body padding-xs">
										<textarea class="form-control no-border no-shadow" rows="5" placeholder="Who are you?"></textarea>
									</div>
									<div class="panel-footer clearfix">
										<a class="btn btn-xs btn-success pull-right">Save</a>
									</div>
								</div><!-- /panel -->
									
								<div class="panel panel-default">
									<div class="panel-heading">
										Products
									</div>
									<table class="table table-bordered table-condensed table-hover table-striped table-vertical-center">
										<thead>
											<tr>
												<th></th>
												<th class="text-center">Name</th>
												<th class="text-center">Price</th>
												<th class="text-center">Total Sales</th>
												<th></th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td class="text-center hidden-xs">
													<img data-src="holder.js/60x60" alt="Product Image" src=".">
												</td>
												<td class="text-center">
													Leather Bag
												</td>
												<td class="text-center">
													$50
												</td>
												<td class="text-center">
													102
												</td>
												<td class="text-center">
													<a class="btn btn-sm btn-success">Edit</a>
												</td>
											</tr>
											<tr>
												<td class="text-center hidden-xs">
													<img data-src="holder.js/60x60" alt="Product Image" src=".">
												</td>
												<td class="text-center">
													Brown Sunglasses
												</td>
												<td class="text-center">
													$80
												</td>
												<td class="text-center">
													310
												</td>
												<td class="text-center">
													<a class="btn btn-sm btn-success">Edit</a>
												</td>
											</tr>
											<tr>
												<td class="text-center hidden-xs">
													<img data-src="holder.js/60x60" alt="Product Image" src=".">
												</td>
												<td class="text-center">
													Summer Dress
												</td>
												<td class="text-center">
													$35
												</td>
												<td class="text-center">
													89
												</td>
												<td class="text-center">
													<a class="btn btn-sm btn-success">Edit</a>
												</td>
											</tr>
										</tbody>
									</table>
									<div class="panel-footer text-right">
										<a class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Add Product</a>
										<a class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i> Delete</a>
									</div>
								</div><!-- panel -->
							</div><!-- /tab2 -->
							<div class="tab-pane fade" id="message">
								<div class="panel panel-default inbox-panel">
									<div class="panel-heading">
										<div class="input-group">
											<input type="text" class="form-control input-sm" placeholder="Search here...">
												<span class="input-group-btn">
												<button class="btn btn-default btn-sm" type="button"><i class="fa fa-search"></i></button>
											</span>
										</div><!-- /input-group -->
									</div>
									<div class="panel-body">
										<label class="label-checkbox inline">
											<input type="checkbox" id="chk-all">
											 <span class="custom-checkbox"></span>
										</label>
										<a class="btn btn-sm btn-danger"><i class="fa fa-plus"></i> Write Mail</a>
										<a class="btn btn-sm btn-default"><i class="fa fa-trash-o"></i> Delete</a>
								
										<div class="pull-right">
											<a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-refresh"></i></a>			
											<div class="btn-group" id="inboxFilter">
												<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
													All
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu pull-right">
													<li><a href="#">Read</a></li>
													<li><a href="#">Unread</a></li>
													<li><a href="#">Starred</a></li>
													<li><a href="#">Unstarred</a></li>
												</ul>
											</div>
										</div>
									</div>
									<ul class="list-group">
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="starred"><i class="fa fa-star fa-lg"></i></span>
											<span class="from">John Doe</span>		
										
											<span class="detail">
												<span class="label label-danger">Important</span>		
												Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.
											</span>
											<span class="inline-block pull-right">
												<span class="attachment"><i class="fa fa-paperclip fa-lg"></i></span>							
												<span class="time">2:32 Am</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="starred"><i class="fa fa-star fa-lg"></i></span>
											<span class="from">Jane Doe</span>		
											<span class="detail">
												<span class="label label-info">Work</span>		
												Nunc vel lorem volutpat, placerat erat ut, pulvinar mi.
											</span>		
											<span class="inline-block pull-right">
												<span class="attachment"><i class="fa fa-paperclip fa-lg"></i></span>							
												<span class="time">1:17 Am</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">My business</span>		
											<span class="detail">Phasellus ac feugiat mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus.</span>		
											<span class="inline-block pull-right">
												<span class="time">Yesterday</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">John Doe</span>		
											<span class="detail">Suspendisse tristique ullamcorper sapien id pulvinar.</span>		
											<span class="inline-block pull-right">
												<span class="time">Oct 10</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">Bill Doe</span>	
											<span class="detail">
												<span class="label label-danger">Important</span>												
												Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.
											</span>		
											<span class="inline-block pull-right">
												<span class="time">Oct 9</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">My friend</span>		
											<span class="detail">
												<span class="label label-warning">Private</span>												
												Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.
											</span>		
											<span class="inline-block pull-right">
												<span class="time">Oct 9</span>			
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">John Doe</span>		
											<span class="detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.</span>
											<span class="inline-block pull-right">
												<span class="attachment"><i class="fa fa-paperclip fa-lg"></i></span>							
												<span class="time">Sep 27</span>		
											</span>							
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="starred"><i class="fa fa-star fa-lg"></i></span>
											<span class="from">Jane Doe</span>		
											<span class="detail">Nunc vel lorem volutpat, placerat erat ut, pulvinar mi.</span>		
											<span class="inline-block pull-right">
												<span class="time">Sep 25</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												 <span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">My business</span>		
											<span class="detail">
												<span class="label label-info">Work</span>		
												Phasellus ac feugiat mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus.
											</span>		
											<span class="inline-block pull-right">
												<span class="time">Sep 1</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">John Doe</span>		
											<span class="detail">Suspendisse tristique ullamcorper sapien id pulvinar.</span>
											<span class="inline-block pull-right">								
												<span class="time">Aug 30</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="starred"><i class="fa fa-star fa-lg"></i></span>
											<span class="from">Bill Doe</span>		
											<span class="detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.</span>		
											<span class="inline-block pull-right">
												<span class="time">Aug 18</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">My friend</span>		
											<span class="detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.</span>		
											<span class="inline-block pull-right">
												<span class="time">Aug 17</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="starred"><i class="fa fa-star fa-lg"></i></span>
											<span class="from">Jane Doe</span>		
											<span class="detail">Nunc vel lorem volutpat, placerat erat ut, pulvinar mi.</span>		
											<span class="inline-block pull-right">
												<span class="time">July 13</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												 <span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">My business</span>		
											<span class="detail">Phasellus ac feugiat mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus.</span>		
											<span class="inline-block pull-right">
												<span class="time">July 13</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												 <span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">John Doe</span>		
											<span class="detail">Suspendisse tristique ullamcorper sapien id pulvinar.</span>		
											<span class="inline-block pull-right">
												<span class="time">July 11</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">Bill Doe</span>		
											<span class="detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.</span>		
											<span class="inline-block pull-right">
												<span class="time">July 8</span>		
											</span>
										</li>
										<li class="list-group-item clearfix inbox-item">
											<label class="label-checkbox inline">
												<input type="checkbox" class="chk-item">
												<span class="custom-checkbox"></span>
											</label>
											<span class="not-starred"><i class="fa fa-star-o fa-lg"></i></span>
											<span class="from">My friend</span>		
											<span class="detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.</span>		
											<span class="inline-block pull-right">
												<span class="time">July 4</span>		
											</span>
										</li>
									</ul><!-- /list-group -->
									<div class="panel-footer clearfix">
										<div class="pull-left">112 messages</div>
										<div class="pull-right">
											<span class="middle">Page 1 of 8 </span>
											<ul class="pagination middle">
												<li class="disabled"><a href="#"><i class="fa fa-step-backward"></i></a></li>
												<li class="disabled"><a href="#"><i class="fa fa-caret-left large"></i></a></li>
												<li><a href="#"><i class="fa fa-caret-right large"></i></a></li>
												<li><a href="#"><i class="fa fa-step-forward"></i></a></li>
											</ul>
										</div>
									</div>
								</div><!-- /panel -->
							</div><!-- /tab3 -->
						</div><!-- /tab-content -->
					</div><!-- /.col -->
				</div><!-- /.row -->			
			</div><!-- /.padding-md -->
		</div><!-- /main-container -->
	</div><!-- /wrapper -->

	<a href="" id="scroll-to-top" class="hidden-print"><i class="fa fa-chevron-up"></i></a>
	
	<!-- Logout confirmation -->
	<div class="custom-popup width-100" id="logoutConfirm">
		<div class="padding-md">
			<h4 class="m-top-none"> Do you want to logout?</h4>
		</div>

		<div class="text-center">
			<a class="btn btn-success m-right-sm" href="login.html">Logout</a>
			<a class="btn btn-danger logoutConfirm_close">Cancel</a>
		</div>
	</div>
	
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	
	<!-- Jquery -->
	<script src="js/jquery-1.10.2.min.js"></script>
	
	<!-- Bootstrap -->
      <script src="js/bootstrap/bootstrap.min.js"></script>
   
	<!-- holder -->
	<script src='js/uncompressed/holder.js'></script>
	
	<!-- Modernizr -->
	<script src='js/modernizr.min.js'></script>
	
	<!-- Pace -->
	<script src='js/pace.min.js'></script>
	
	<!-- Popup Overlay -->
	<script src='js/jquery.popupoverlay.min.js'></script>
	
	<!-- Slimscroll -->
	<script src='js/jquery.slimscroll.min.js'></script>
	
	<!-- Cookie -->
	<script src='js/jquery.cookie.min.js'></script>
	
	<!-- Endless -->
	<script src="js/endless/endless.js"></script>
	
  </body>
</html>
